<template>
	<div class="my-task">
		<SearchHeader
			:placeholder="$t('pages.process.search.Placeholder', '流程名称、任务主题、申请人')"
			@search="search"
			:jumpToPath="'TaskSearch'"
			:returnTo="'TaskList'"
		/>
		<div class="my-task-content">
			<HeaderTabs
				@init="init"
				@changeMyTaskActive="changeMyTaskActive"
				@showCondition="showCondition"
				@bathApproval="bathApproval"
				@reset="reset"
				:listCountByType="listCountByType"
				:checked="checked"
				:sortChecked="sortChecked"
				:approvalChecked="approvalChecked"
				:tabsCount="tabsCount"
				:active="myTaskActive"
				:conditionIsShow="conditionIsShow"
				:showApprovalFooter="showApprovalFooter"
				:todoTabListTotal="todoTabListTotal"
			/>
			<TaskList
				v-show="!conditionIsShow"
				@init="init"
				@lazyLoad="lazyLoad"
				@changeMyTaskActive="changeMyTaskActive"
				@changeRefreshLazyload="changeRefreshLazyload"
				@addTaskInstanceId="addTaskInstanceId"
				@delTaskInstanceId="delTaskInstanceId"
				:refreshLoading="refreshLoading"
				:cardList="cardList"
				:lazyLoading="lazyLoading"
				:myTaskActive="myTaskActive"
				:searchVal="searchVal"
				:noDataText="noDataText"
				:noMore="noMore"
				:STATE_CODE="STATE_CODE"
				:showApprovalFooter="showApprovalFooter"
				:checkedAllApproval="checkedAllApproval"
				:canCheck="canCheck"
				:listFull="listFull"
			/>
			<ConditionFrame
				v-show="conditionIsShow"
				@init="init"
				@changeTypeKeyList="changeTypeKeyList"
				@changeChecked="changeChecked"
				@showCondition="showCondition"
				@changeMyTaskConditionActive="changeMyTaskConditionActive"
				@changeSortChecked="changeSortChecked"
				@changeApprovalChecked="changeApprovalChecked"
				@changeTaskOtherChecked="changeTaskOtherChecked"
				@changeDelegatedFillter="changeDelegatedFillter"
				@reset="reset"
				@changeAgentId="changeAgentId"
				:listCountByType="listCountByType"
				:checked="checked"
				:sortChecked="sortChecked"
				:approvalChecked="approvalChecked"
				:taskOtherChecked="taskOtherChecked"
				:leftTab="myTaskLeftTab"
				:active="myTaskActive"
				:conditionActive="myTaskConditionActive"
				:rightList="myTaskRightList"
				:STATE_CODE="STATE_CODE"
				:labelIdMap="labelIdMap"
				:agentList="agentList"
				:delegatedFillter="delegatedFillter"
			/>
			<div class="batch-approval-footer" v-if="showApprovalFooter">
				<van-checkbox
					checked-color="var(--bl-brand-c)"
					v-model="checkedAllApproval"
				>
					{{  $t('pages.task.selectAll', '全选') }}（{{
						$t('pages.task.selected', '已选')
					}}
					{{ approvalArr?.length }}）
				</van-checkbox>
				<button @click="handelApproval">
					{{ $t('pages.task.approver', '同意') }}
				</button>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import SearchHeader from '@/entry_mobile/components/SearchHeader/index.vue'
import HeaderTabs from '@/entry_mobile/components/HeaderTabs/index.vue'
import TaskList from './components/TaskList/index.vue'
import ConditionFrame from '@/entry_mobile/components/ConditionFrame/index.vue'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import useMyTask from './hooks/useMyTask'

const {
	tabsCount,
	init,
	refreshLoading,
	cardList,
	search,
	myTaskActive,
	searchVal,
	noDataText,
	lazyLoad,
	lazyLoading,
	noMore,
	STATE_CODE,
	listCountByType,
	checked,
	changeMyTaskActive,
	conditionIsShow,
	showCondition,
	changeTypeKeyList,
	changeChecked,
	myTaskLeftTab,
	myTaskConditionActive,
	changeMyTaskConditionActive,
	myTaskRightList,
	sortChecked,
	changeSortChecked,
	taskOtherChecked,
	changeTaskOtherChecked,
	approvalChecked,
	changeApprovalChecked,
	reset,
	changeRefreshLazyload,
	labelIdMap,
	bathApproval,
	approvalArr,
	checkedAllApproval,
	showApprovalFooter,
	addTaskInstanceId,
	delTaskInstanceId,
	canCheck,
	handelApproval,
	listFull,
	changeAgentId,
	agentList,
	delegatedFillter,
	changeDelegatedFillter,
	todoTabListTotal
} = useMyTask()
</script>
<style lang="less">
.agree-to-approve{
	max-width: 100vw;
}
</style>
<style lang="less" scoped>
.my-task {
	height: calc(100vh - 51px);
	&-content {
		height: calc(100% - 51px);
		position: relative;
	}
}
.batch-approval-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	z-index: 99;
	bottom: 16px;
	bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
  bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
	left: 0;
	width: 100%;
	height: 56px;
	background-color: #fff;
	padding: 10px 10px 10px 30px;
	button {
		height: 28px;
		padding: 0 26px;
		background: @rok-mobile-primary-color;
		border-radius: 4px;
		border: 0;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 100%;
		text-align: center;
		color: #ffffff;
	}
	/deep/.van-checkbox__label {
		span {
			display: flex;
			align-items: center;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			letter-spacing: 0.08px;
			color: @rok-mobile-primary-color;
		}
	}
}
</style>
